

<!--START SECTION - HEADER-->
<!DOCTYPE html>
<html>
<head>

    <title>$reportTitle$</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: rgba(238, 238, 238, 0.75);
        }

        #header {
            text-align: center;
            vertical-align: middle;
            color: rgba(0, 0, 0, 0.8);
            height: 100px;
        }

        #header a{
            color: rgba(0, 0, 0, 0.8);
            text-decoration: underline;
        }

        #title {
            font-size: 22pt;
            font-weight: bold;
            margin-top: 20px;
        }

        #subtitle {
            margin-top: 20px;
        }

        #content {
            text-align: center;
            width: 100%;
            height: 100%;
        }

        #data-table {
            width: 98%;
            margin-left: auto;
            margin-right: auto;
        }

        .download-button {
            position: relative;
            left: 0;
            text-align: center;
            background-color: rgba(0, 128, 0, 0.75);
            color: rgba(255, 255, 255, 0.9);
            border-radius: 5px;
            margin-left: 25px;
            margin-bottom: 5px;
        }

        #reportFooter {
            text-align: center;
            color: rgba(0, 0, 0, 0.6);
        }

    </style>

    <link href="/webapps/lib/third-party/tabulator/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="/webapps/lib/third-party/tabulator/js/tabulator.min.js"></script>
    <script type="text/javascript" src="/webapps/lib/third-party/js-xlsx/xlsx.full.min.js"></script>

    <script type="text/javascript">
        var datatable = null;
        function getDateTimeString() {
        var d = new Date();
        return "_" + d.getFullYear() + ("0"+(d.getMonth()+1)).slice(-2) + ("0" + d.getDate()).slice(-2) + "_" + ("0" + d.getHours()).slice(-2) + ("0" + d.getMinutes()).slice(-2);
        }
    </script>

</head>

<body>

    <div id='header'>
        <div style='position:absolute;top:0;left:0;width:220px;height:100px;'>
            <div style='font-size:18pt;font-weight:bold;color:rgba(0, 0, 0, 0.6);margin-top:20px;'>Company Name</div>
            <div style='font-size:12pt;font-weight:bold;color:rgba(0, 0, 0, 0.6);'>1234 Anystreet</div>
            <div style='font-size:12pt;font-weight:bold;color:rgba(0, 0, 0, 0.6);'>Anytown, USA 12345</div>
            <div style='font-size:12pt;font-weight:bold;color:rgba(0, 0, 0, 0.6);'>(123) 456-7890</div>
        </div>
        <div id='title'> $reportTitle$ </div>
        <div id='subtitle'>$subTitle$</div>
    </div>
<!--END SECTION - HEADER-->



<!--START SECTION - DATA HEADER-->
<button class="download-button" onclick="datatable.download('csv', '$reportTitle$'+getDateTimeString()+'.csv')">Download CSV</button>
<button class="download-button" onclick="datatable.download('xlsx', '$reportTitle$'+getDateTimeString()+'.xlsx')">Download XLSX</button>
<div id='content'><!-- start #content -->
    <table id='data-table'>
        <thead>
            <tr id='dataHeaderTRow'>
<!--END SECTION - DATA HEADER-->



<!--START SECTION - COLUMN ROW TEMPLATE-->
<th id='columnRowTd'>$columnname$</th>
<!--END SECTION - COLUMN ROW TEMPLATE-->



<!--START SECTION - COLUMN ROW SEPARATOR-->
</tr>
</thead>
<tbody>
<!--END SECTION - COLUMN ROW SEPARATOR-->



<!--START SECTION - DATA ROW TEMPLATE-->
<td>$data$</td>
<!--END SECTION - DATA ROW TEMPLATE-->



<!--START SECTION - DATA ROW START EVEN-->
<tr>
<!--END SECTION - DATA ROW START EVEN-->



<!--START SECTION - DATA ROW START ODD-->
<tr>
<!--END SECTION - DATA ROW START ODD-->



<!--START SECTION - DATA ROW END-->
</tr>
<!--END SECTION - DATA ROW END-->



<!--START SECTION - DATA FOOTER-->
</tbody>
        <tfoot>
            <tr></tr>
        </tfoot>
</table>

</div><!-- end #content -->
<!--END SECTION - DATA FOOTER-->



<!--START SECTION - FOOTER-->
<div id='reportFooter'>
    <div id='reportSummary'>Total: $numRecords$</div>
</div>

<div id='additionalCodeContainer'></div>

<script>
    datatable = new Tabulator("#data-table", {
         layout:"fitColumns",
         pagination:"local",
         paginationSize:20,
         rowFormatter:function(row){
             if(row.getData().active == "N" || row.getData().active == ""){
                 row.getElement().style.backgroundColor = "rgba(128, 0, 0, 0.1)";
             } else if(row.getData().active == "Y") {
                 row.getElement().style.backgroundColor = "rgba(0, 128, 0, 0.1)";
             }
         },
    });

</script>

</body>
</html>
<!--END SECTION - FOOTER-->


